<template>
  <div ref="containerRef" class="screen-right">
    <component
      :is="item.component"
      v-for="item in components"
      :key="item.name"
      class="screen-right-item"
      :name="item.name"
    >
      <Right1 />
    </component>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue';
import { useSortable } from '@/utils/useSortable';

import Right1 from './right1.vue';
import Right2 from './right2.vue';
import Right3 from './right3.vue';
const components = shallowRef([
  { name: 'right1', component: Right1 },
  { name: 'right2', component: Right2 },
  { name: 'right3', component: Right3 },
]);

const { containerRef } = useSortable(components);
</script>

<style lang="scss">
.screen-right {
  width: 100%;
  height: 100%;
  padding-left: 7px;
  .screen-right-item {
    width: 100%;
    height: 30%;
    // background-color: var(--es-block-bg);
    // padding: 16px;
  }
  // .screen-right-item + .screen-right-item {
  //   margin-top: 15px;
  // }
  .screen-right-item {
    padding-bottom: 15px;
  }
  .screen-right-item:nth-child(3) {
    height: 40%;
  }
}
</style>
